<template>
  <a-modal
    v-model:visible="visible"
    title="编辑愿望"
    @ok="handleOk"
    @cancel="handleCancel"
    :destroy-on-close="true"
  >
    <a-form
      :model="form"
      :rules="rules"
      ref="formRef"
      layout="vertical"
    >
      <a-form-item label="愿望描述" name="description" :rules="[rules.description]">
        <a-textarea
          v-model:value="form.description"
          placeholder="请输入愿望描述"
          rows="4"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref } from "vue";

const visible = ref(false); // 控制弹窗显示
const formRef = ref(null); // 表单引用
const form = ref({
  title: "",
  description: "",
}); // 表单数据

const rules = {
  title: [
    { required: true, message: "请填写愿望标题", trigger: "blur" },
    { max: 50, message: "愿望标题最多50个字符", trigger: "blur" },
  ],
  description: [
    { required: true, message: "请填写愿望描述", trigger: "blur" },
    { max: 200, message: "愿望描述最多200个字符", trigger: "blur" },
  ],
};

// 点击确认
const handleOk = () => {
  formRef.value.validate().then(() => {
    console.log("提交数据：", form.value);
    // 提交表单数据处理逻辑
    visible.value = false; // 关闭弹窗
  }).catch((error) => {
    console.log("校验失败：", error);
  });
};

// 点击取消
const handleCancel = () => {
  visible.value = false;
};
</script>

<style scoped>
/* 可根据需求自定义样式 */
</style>
